﻿
@{
    ViewBag.Title = "博客列表";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

@section css{
    <style>
        .search-width {
            width: 200px;
        }

        /*设置自动列宽适应，避免意外情况或者分页的时候出现横向滚动条 http://fly.layui.com/jie/18737/page/2/*/
        .layui-body {
            overflow-y: scroll;
        }

        /*覆盖 .layui-form-label修改而适应页面查询条件label显示*/
        .layui-form-search-label {
            float: left;
            display: block;
            padding: 9px;
            font-weight: 400;
            line-height: 20px;
        }
    </style>
}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>博客列表</legend>
</fieldset>

<div class="layui-field-box">
    <blockquote class="layui-elem-quote">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-search-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" />
                </div>
            </div>
            @*lay-verify 使用 看 http://blog.csdn.net/haibo0668/article/details/52932891*@
            <div class="layui-inline">
                <label class="layui-form-search-label">查询条件</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                @*<button class="layui-btn" id="searchBtn">搜索</button>*@
                <input type="button" class="layui-btn" id="searchBtn" value="搜索" />
            </div>
            <div class="layui-inline">
                <button class="layui-btn">搜索</button>
            </div>
        </div>
    </blockquote>

    <div class="table">
        <table id="list" lay-filter="dataList"></table>
    </div>
</div>

@section scripts{
    <script>
        layui.use('table', function () {
            var table = layui.table;

            // 加载数据
            table.render({
                elem: '#list',
                //height: 315,
                url: '/Admin/Blog/GetArticleList', // 数据接口
                page: true, // 开启分页
                cols: [[ // 表头
                    { field: 'author', title: '作者', sort: true, fixed: 'left' },
                    { field: 'title', title: '标题' },
                    { field: 'category', title: '分类' },
                    { field: 'content', title: '内容' },
                    { field: 'createTime', title: '创建时间' },
                    { field: 'remark', title: '备注' },
                    { fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#bar' } // 这里的toolbar值是模板元素的选择器
                ]]
            });

            // 查询数据重新加载
            $("#searchBtn").on('click', function () {
                table.reload('list', {
                    where: { // 设定异步数据接口的额外参数，任意设
                        name: $("#name").val()
                    },
                    page: {
                        curr: 1 // 重新从第一页开始
                    }
                });
            });

            // 工具条监听
            table.on('tool(dataList)', function (obj) {
                var data = obj.data;

                if (obj.event === 'detail') {
                    layer.msg('ID:' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {

                    window.location.href = "Add?menuId=articleAdd&id=" + data.id;

                    //layer.alert('编辑行：<br>' + JSON.stringify(data));
                    //layer.open({
                    //    title: '编辑页面',
                    //    content: 'Add',
                    //    type: 2, // 2 表示打开对应链接的页面
                    //    area: ['1500px', '800px'],
                    //    cancel: function () { // 右上角关闭按钮回调事件
                    //        // 进行list页面数据刷新
                    //    }

                    //});
                }
            });

        })
    </script>

    @*表格工具条*@
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

        @*支持 laytpl 写法*@
        {{# if (d.Status == 0) { }}
        <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
        {{# } }}
    </script>
}

